<template>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="工作服" name="type_2" v-if="accessMenus.indexOf(2) > -1">
            <pieceWork></pieceWork>
        </el-tab-pane>
        <el-tab-pane label="其他" name="type_1" v-if="accessMenus.indexOf(1) > -1 || accessMenus.indexOf(3) > -1 || accessMenus.indexOf(4) > -1">
            <pieceOthers :accessMenus="accessMenus"></pieceOthers>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
  import pieceWork from './work'
  import pieceOthers from './others'
  import { fetchFactoryBalingManagerType } from '@/api/factory'

  export default {
    name: 'PackPack',
    data() {
      return {
        activeName: '', // 默认工作服
        accessMenus: []
      }
    },
    created: function() {
      this.getRoles()
    },
    components: {
      pieceOthers,
      pieceWork
    },
    methods: {
      getRoles() {
        fetchFactoryBalingManagerType().then(response => {
          (response.data || []).forEach((item) => {
            this.accessMenus.push(item.type)
          })
          if (this.accessMenus && this.accessMenus.length) {
            this.activeName = this.accessMenus.indexOf(2) > -1 ? 'type_2' : 'type_' + this.accessMenus[0]
          }
        })
      },
      handleClick() {
        console.log('handleClick')
      }
    }
  }
</script>

